<template>
	<div style="font-size: 12px; line-height: 60px; display: flex;">
		<div style="flex: 1; font-size: 20px;">
			<span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>

			<!-- 面包屑 -->
			<el-breadcrumb separator-class="el-icon-arrow-right"
				style="display: inline-block; margin-left: 20px; vertical-align:middle;">
				<el-breadcrumb-item v-for="(item,index) in lists" :key="item.path">
					<router-link :to="item.path">{{item.name}}</router-link>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div>
			<el-dropdown>
				<!-- class="el-icon-arrow-down" -->
				<i style="margin-left: 10px;">
					<el-avatar style="vertical-align:middle; width: 30px; height: 30px;" :src="user.icon" />
					<span style="margin-left: 10px;">{{user.nickname}}</span>
				</i>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item @click.native="handleEdit">个人信息</el-dropdown-item>
					<el-dropdown-item @click.native="handleEditPassword">修改密码</el-dropdown-item>
					<el-dropdown-item @click.native="logout">退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>

		<!-- 嵌套表单 修改个人信息 -->
		<el-dialog title="修改个人信息" :visible.sync="dialogFormVisible"  width="35%" style="text-align: center;">
			<el-form label-width="100px">
				<div style="text-align: center;">
					<el-upload class="avatar-uploader" action="/user/upload" :show-file-list="false"
						:on-success="handleAvatarSuccess">
						<img v-if="form.icon" :src="form.icon" class="avatar" style="width: 100%; height: 100px;">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<el-form-item label="用户名" >
					<el-input v-model="form.nickname" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="账号">
					<el-input v-model="form.number" autocomplete="off" style="width: 75%;" disabled></el-input>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="form.phone" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.address" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="edit">确 定</el-button>
			</div>
		</el-dialog>
		
		<!-- 嵌套表单 修改密码 -->
		<el-dialog title="修改密码" :visible.sync="dialogFormVisible1" :modle="editPass" width="35%" style="text-align: center;">
			<el-form label-width="100px">
				<el-form-item label="用户名" >
					<el-input v-model="editPass.number" disabled autocomplete="off" style="width: 75%;" ></el-input>
				</el-form-item>
				<el-form-item label="原密码">
					<el-input v-model="editPass.oldPassword" type="password" autocomplete="off" style="width: 75%;" placeholder="请输入原始密码"></el-input>
				</el-form-item>
				<el-form-item label="新密码">
					<el-input v-model="editPass.newPassword" type="password" autocomplete="off" style="width: 75%;" placeholder="请输入新密码"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="editPassword">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Header",
		props: {
			collapseBtnClass: String,
			collapse: Boolean,
			menus: Array,
			user: Object
		},
		data() {
			return {
				lists: [],
				// 表单是否显示
				dialogFormVisible: false,
				dialogFormVisible1: false,
				users: {},
				form: {},
				nickname: '',
				editPass: {
					number : this.user.number,
					oldPassword: '',
					newPassword: ''
				}
			}
		},
		created() {
			this.lists = this.$route.matched
		},
		watch: {
			$route(to, from) {
				this.lists = to.matched
			}
		},
		methods: {
			// 编辑用户信息   &&   打开编辑框
			edit() {
				this.request.put("/user", this.form).then(res => {
					if (res.code != 500) {
						this.nickname = this.form.nickname
						this.dialogFormVisible = false
						this.$message.success(res.message)
					} else {
						this.dialogFormVisible = false
						this.$message.error(res.message)
					}
				})
			},
			handleEdit() {
				this.request.get("/user/" + this.user.number).then(res =>{
					if (res.code != 500){
						this.users = res.obj
						console.log(this.users);
					}else{
						this.$message.error(res.message)
					}
				})
				this.form = JSON.parse(JSON.stringify(this.users))
				this.dialogFormVisible = true
			},
			
			
			// 修改密码 && 保存密码
			handleEditPassword() {
				this.dialogFormVisible1 = true
			},
			editPassword(){
				this.request.put("/user/EditP", this.editPass).then(res => {
					if (res.code != 500) {
						this.dialogFormVisible1 = false
						localStorage.removeItem("user")
						this.$router.push("/login")
						localStorage.removeItem("menus")
						this.$message.success(res.message)
					} else {
						this.dialogFormVisible1 = false
						this.$message.error(res.message)
					}
				})
			},
			
			
			// 用户头像上传
			handleAvatarSuccess(res) {
				this.form.icon = res.obj
			},

			// 退出
			logout() {
				// 删除 sessionStorage 中的数据
				localStorage.removeItem("user")
				this.$router.push("/login")
				localStorage.removeItem("menus")
				// 删除 vuex中的数据，让当前页面刷新
				window.location.reload()
			}
		}
	}
</script>

<style>
</style>
